// 基本信息
import { PropType, defineComponent, reactive, ref } from "vue";
import { SchemaNodeKey } from "@/utils/constants";
import { parseProfileFromSensor, parseProfileFromSn } from "@/utils/schema";
import { getHistoryData } from "@/api/modules/iot/data";
import VideoPanel from "@/components/VideoPanel";
import DialogBox from "@/components/DialogBox";
import { useHistory } from "@/hooks/useHistory";
import Empty from "@/components/Empty";
import ProTable from "@/components/ProTable/index.vue";
import { Device } from "@/api/interface/iot";
import { ColumnProps } from "@/components/ProTable/interface";
import video from "@/assets/images/iot/snapshot/4.png";

export default defineComponent({
	name: "Ipcamera", // 动态引入需要
	label: "视频", // 动态引入需要
	image: video, // 动态引入需要
	props: {
		detail: {
			type: Object as PropType<Device.ResDeviceInfo>,
			default() {
				return {};
			}
		}
	},
	setup() {
		const profile = inject<any>(SchemaNodeKey.profile);
		const sn = parseProfileFromSn(profile.value);
		const flv = ref();
		const init = async () => {
			flv.value = parseProfileFromSensor(profile.value)?.url?.flv || "";
		};
		watchEffect(() => {
			if (profile.value) {
				init();
			}
		});
		const initParam = reactive<any>({
			pageSize: 8,
			timeOrder: "desc",
			idSn: sn,
			key: "motion.image",
			keyType: "sensor",
			productModel: "ipcamera"
		});
		const getTableList = async (params: any) => {
			if (flv.value) {
				return getHistoryData({ ...params });
			} else {
				return { result: { records: [] } };
			}
		};
		const dataCallback = (data: any) => {
			return {
				datalist: data.records || [],
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const clickItem = async (item: any) => {
			let { result } = await getHistoryData({
				pageIndex: 1,
				pageSize: 12,
				startTime: item.updateTime,
				endTime: item.updateTime,
				timeOrder: "desc",
				idSn: sn,
				key: "motion.record",
				keyType: "sensor",
				productModel: "ipcamera"
			});
			if (result.records.length) {
				fileDialog.detail = result.records[0];
				fileDialog.visible = true;
			}
		};
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "value", label: "内容" },
			{ prop: "updateTime", label: "时间", width: "180" }
		];
		const { fileDialog } = useHistory();
		return () => {
			return (
				<div class="flex bg-white h-full">
					<DialogBox
						class="dialog-dense"
						footerLabel={["关闭"]}
						width="800px"
						v-model:visible={fileDialog.visible}
						title="历史视频"
					>
						{fileDialog.visible ? <video src={fileDialog.detail.value} class="w-full" controls autoplay></video> : null}
					</DialogBox>
					<div class="flex-col flex-1 mr-2">
						<div class="page-title font-bold " style="padding:20px;">
							<div class="title-left-line"></div>实时视频
						</div>
						{flv.value ? (
							<div style="height:calc(100% - 61px); box-sizing: border-box;padding-left: 20px;padding-bottom: 20px;">
								<VideoPanel class="h-full" style="background:#000" videoUrl={flv.value} />
							</div>
						) : (
							<div
								style="height:calc(100% - 61px); box-sizing: border-box;padding-left: 20px;padding-bottom: 20px;"
								class="overflow-hidden"
							>
								<video class="w-full h-full bg-neutral-900" />
							</div>
						)}
					</div>
					<div style="width:45%;min-width:300px">
						<ProTable
							toolbar={["grid"]}
							viewType="grid"
							custSearch
							columns={columns}
							title="历史事件"
							initParam={initParam}
							gridSpan={12}
							noList
							requestApi={getTableList}
							dataCallback={dataCallback}
							hideCardCheck
						>
							{{
								cardBody: (scope: any) => {
									return (
										<div onClick={() => clickItem(scope.row)}>
											<el-image style="width: 100%;" class="h-60" src={scope.row.value} fit="fill" />
											<div class="m-4 text-gray-500">{scope.row.updateTime}</div>
										</div>
									);
								},
								empty: () => {
									return <Empty showButton={false} title="暂无信息" subtitle="请检查设备配置及网格环境。" />;
								}
							}}
						</ProTable>
					</div>
				</div>
			);
		};
	}
});
